import { useThemeStore } from '@renderer/stores'
import { useEffect, useRef } from 'react'

interface HoverBoxProps {
  selectedIndex: number
}
const HoverBox = ({ selectedIndex }: HoverBoxProps) => {
  const hoverBoxRef = useRef<HTMLDivElement>(null)
  const { isDark } = useThemeStore()
  useEffect(() => {
    if (hoverBoxRef.current) {
      hoverBoxRef.current.style.top = `${selectedIndex * 36}px`
      console.log(hoverBoxRef.current.style.top)
    }
  }, [selectedIndex])
  return (
    <>
      <div
        ref={hoverBoxRef}
        className={`absolute overflow-hidden ${isDark ? 'bg-gray-100' : 'bg-blue-500'}  w-full h-[36px] opacity-20 pointer-events-none transition-all`}
      />
    </>
  )
}

export default HoverBox
